<template>
	<view>
		<view>
			<image src="https://image.hzwltb69.com/app/images/dsp.png" style="height:310rpx;width:750rpx;"></image>
		</view>
		<view class="box" @tap="toExchange">
			<view class="left_box" v-if="time!=0">
				<view class="left_item"></view>
			</view>
			<view class="mask">{{time}}</view>
		</view>
		
		<view class="content" style="margin-top: -10rpx;">
			<view class="col" v-for="(item,index) in list" :key="index">
				<video v-if="currentId == item.id" style="height:750rpx;width:450rpx; text-align: center;"
					autoplay="true" :id="'video'+item.id" :src="item.url"></video>
				<view v-else @click="play(item.id,index)">
					<image :src="item.feedsImg" style="height:750rpx;width:450rpx;text-align: center;"></image>
					<view class=" block">
						<view class="sanjia"></view>
					</view>
				</view>
				<view class="goods">
					{{item.title}}
				</view>
				</block>
				<view class="name" @click="todetail(item.product.id)">
					<view class="buy">
						立即购买
					</view>
				</view>
			</view>
		</view>
		<view>
			<view @animationend="runend(index)" @animationstart="runstart(index)" v-for="(item,index) in packStyle"
				:key="index" class="envelope" :style="item">
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				currentId: 0,
				scrollH: 0,
				scrollTop: 0,
				height: 0,
				windowHeight: 0,
				packStyle: [],
				time: 0,
				page: 0,
				timer: {}
			}
		},
		onLoad() {
			let that = this
			this.getList()
			// 获取可视区域高度
			uni.getSystemInfo({
				success: function(res) {
					that.windowHeight = res.windowHeight
				}
			})
		},
		onPageScroll(res) {
			// 获取滚动距离
			this.scrollH = res.scrollTop
			// 判断元素是否已经出了可视区
			if (this.scrollH > this.scrollTop || this.scrollH + this.windowHeight < this.scrollTop) {
				const e = uni.createVideoContext("video" + this.currentId, this);
				e.pause()
			}
		},
		onHide() {
			this.currentId = 0
		},
		methods: {
			runstart(key) {
				if (key === 0) {
					console.log('监听动画开始');
				}
			},
			runend(key) {
				if (key === this.packStyle.length - 1) {
					console.log('监听动画结束---下一波红包开始');
					//	this.createRedPack()
					this.setIcons();

				}
			},
			setIcons() {
				let that = this
				that.$http('video.reward', {
					page: that.page,
					size: 10
				}).then(res => {
				
					that.list = res

				});
			},
			createRedPack() {
				// 随机生成30个红包
				var initNumber = 0;
				for (var i = 0; i < 60; i++) {
					let lefts = (Math.floor(Math.random() *5)); // 随机边距
					let delay = Math.floor(Math.random() * 2 + 2); // 延迟时间
					initNumber += lefts; // 确保唯一，不让红包出现重叠现象
					this.packStyle.push({
						'left': initNumber + '%',
						'top': (initNumber * Math.floor(Math.random() * 100 + 2)) / 5 + 'rpx',
						'animation-delay': delay / 2 + 's'
					})
				}
				//this.getIcons();
			},
			play(id, i) {
				this.currentId = id
				// 获取当前播放视频 元素距离顶部的高度
	
				clearInterval(this.timer);
				this.time = 10;
				if (this.height == 0) {
					uni.createSelectorQuery().select('.col').boundingClientRect((res) => {
						this.height = res.height
						this.scrollTop = res.height * (i + .5)
					}).exec()
				} else {
					this.scrollTop = this.height * (i + .5)
				}
				this.timer = setInterval(() => {
					if (this.time >= 1) {
						this.time--;
					} else {
					//	this.createRedPack();
					//	this.getIcons();
						clearInterval(this.timer);
					}
				}, 1000);
			},
			todetail(id) {
				clearInterval(this.timer);
				this.$Router.push({
					path: '/pages/goods/detail',
					query: {
						id: id
					}
				});
			},
			toExchange() {
	        clearInterval(this.timer);
				this.$Router.push({
					path: '/pages/user/wallet/score-balance',
				});
			},
			getList() {
				let that = this
				that.$http('video.list', {
					page: that.page,
					size: 20
				}).then(res => {
						 
					if (that.page == 0) {
						that.list = res
					} else {
						if (res.length <= 20) {

						} else {

						}
					}
				});
			},
			getIcons() {
				let that = this
				that.$http('video.getpoint', {
					UId: uni.getStorageSync("UId"),
				}).then(res => {
					
					uni.showToast({
						title:"积分+"+res.pointVideo
					})
					if(res.pointVideo>0){
						that.setcoin(res.pointVideo);
					}
					
					
				});
			},
			setcoin(pointVideo){
				let that = this
				that.$http('video.setcoin', {
					UId: uni.getStorageSync("UId"),
					point:pointVideo,
					video_id:that.currentId
				}).then(res => {
					
					
				});
			}

		}
	}
</script>

<style lang="scss">
	// .home {
	// 	width: 100%;
	// 	height: 100%;
	// }

	.content {
		position: relative;
		height: 100%;
		background: linear-gradient(to left, #Fa3579, #Fb3579);
		overflow: hidden;
		padding: 30rpx;
	}

	.envelope {
		position: fixed;
		opacity: 0;
		animation: drops 1.2s cubic-bezier(.22, .22, .39, .26) 1;
		width: 60rpx;
		height: 60rpx;
		background: url("https://image.hzwltb69.com/app/images/gold.png") no-repeat;
		/* background-color: #007AFF; */
		background-size: 60rpx 60rpx;
	}

	@keyframes drops {
		0% {
			opacity: 0;
		}

		20% {
			opacity: 1;
		}

		90% {
			opacity: 1;
		}

		100% {
			opacity: 0;
			transform: translate3d(10rpx, 100vh, -10rpx);
		}
	}

	page {
		background-color: #f2f2f2;
	}

	// .content {
	// 	padding: 30rpx;
	// }
	.goods {
		height: 80rpx;
		line-height: 80rpx;
		font-weight: 600;
		background-color: #FFFFFF;
		text-align: left;
		font-size: 14px;
		padding-left: 20rpx;
	}

	.name {
		height: 120rpx;
		border-radius: 0 0 10px 10px;
		background-color: #FFFFFF;
		text-align: center;
		font-size: 14px;
		padding-bottom: 20rpx;
	}

	.buy {


		height: 80rpx;
		line-height: 80rpx;
		width: 80%;
		background: linear-gradient(to left, #Fe7064, #fe3369);
		text-align: center;
		font-size: 14px;
		color: #fff;
		margin-left: 10%;

		border-radius: 10rpx;

	}

	.col {
		overflow: hidden;
		position: relative;
		background: linear-gradient(to bottom right, #e3e7eb, #5c5c5c);

		border-radius: 10px;
		margin-bottom: 30rpx;
		text-align: center;
		width: 100%;


		.block {
			position: absolute;
			width: 450rpx;
			height: 750rpx;
			margin-left: 150rpx;
			top: 0;
			display: flex;
			justify-content: center;
			align-items: center;

			.sanjia {
				width: 0;
				height: 0;
				border-top: 12px solid transparent;
				border-left: 17px solid #FFFFFF;
				border-bottom: 12px solid transparent;
				text-align: center;
			}
		}
	}

	.box {
		/* 最外层的盒子 */
		width: 120rpx;
		height: 120rpx;
		right: 30rpx;
		z-index: 9999;
		position: fixed;
		border-radius: 50%;
		background-color: #Fe7064;
		margin-top: 20px;
		border: 1px solid #fff;
	}

	.left_box {
		/* 
	        球的父盒子，旋转带动球旋转
	      */
		position: absolute;
		top: -6rpx;
		left: -6rpx;
		bottom: -6rpx;
		right: -6rpx;
		width: 120rpx;
		height: 120rpx;
		overflow: hidden;
		z-index: 1;
		border-radius: 50%;
		animation: loading_left 10s linear;

	}

	.left_item {
		/* 
	      小球位于父盒子边中间
	      */
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		background-color: #Fe7064;
		margin: 0 auto;
	}


	.mask {
		/* 中间倒计时部分，和圆环的内圆 */
		position: absolute;
		top: 6rpx;
		left: 6rpx;
		right: 6rpx;
		bottom: 6rpx;
		z-index: 2;
		border-radius: 50%;
		background-color: #fff;
		text-align: center;
		opacity: 0.5;
		background: #fe3369;
		border: 6rpx solid #8F8F8F;
		line-height: 110rpx;
		font-size: 60rpx;
		color: #ffffff;
		text-align: center;
		font-weight: 700;
	}

	/* 动画 */
	@keyframes loading_left {
		to {
			transform: rotate(1turn);
		}
	}
</style>
